<template>
    <div>
        <h2>Chart.js Responsive Line Chart Demo</h2>
        <canvas id='canvas'></canvas>
    </div>
</template>

<script>

import Chart from 'chart.js'
export default {
    data () {
        return {
            chartData: {
                labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7'],
                datasets: [{
                    label: '1',
                    borderColor: 'rgba(151,187,205,1)',
                    pointBackgroundColor: 'rgba(151,187,205,1)',
                    pointHoverBackgroundColor: 'rgba(220,180,0,1)',
                    data: [20, 30, 80, 20, 40, 10, 60],
                    pointRadius: 10,
                    fill: false
                }, {
                    label: '2',
                    borderColor: 'rgba(220,180,0,1)',
                    pointBackgroundColor: 'rgba(220,180,0,1)',
                    pointHoverBackgroundColor: 'rgba(151,187,205,1)',
                    data: [60, 10, 40, 30, 80, 30, 20],
                    pointRadius: 10,
                    fill: false
                }]

            }
        }
    },
    mounted () {
        this.drawChart()
    },
    methods: {
        drawChart () {
            var ctx = document.getElementById('canvas').getContext('2d')
            /* eslint-disable no-new */
            new Chart(ctx, {
                type: 'line',
                data: this.chartData,
                options: {
                    elements: {
                        line: {
                            tension: 0 // disables bezier curves
                        }
                    }
                }
            })
        }
    }

}
</script>
